<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">
            <div class="logo">
                <img src="../static/img/HOTEL.png" alt="Logo">
            </div>
            <el-menu :default-openeds="['1', '3']"  >
                <!-- 首页作为普通菜单项 -->
                <el-menu-item index="1">
                    <i></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" @click="redirect('user')">
                    <span slot="title" >用户管理</span>
                </el-menu-item>
                <el-menu-item index="4" @click="redirect('room')">
                    <i></i>
                    <span slot="title">房间管理</span>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div class="name-container">
                     <span v-for="(item, index) in breadcrumbItems" :key="index" v-if="index === breadcrumbItems.length-1">
                       {{ item.name }}
                     </span>
                </div>
            </el-header>
            <el-main>
                <div v-if="this.redirects === 'user'" th:include="~{user/user :: userContent}"></div>
                <div v-if="this.redirects === 'room'" th:include="~{room/roomList :: roomContent}"></div>

            </el-main>

        </el-container>
    </el-container>
</div>
<script>
    new Vue({
    el: '#app',
    data() {
        return {
            breadcrumbItems: [
                { name: '首页', path: '/' }
            ],
            redirects: ''
        };
    },
    methods: {
        redirect(route) {
            debugger
            if (route === 'user'){
                this.redirects = 'user';
                console.log(this.redirects);
            }else if (route === 'room'){
                this.redirects = 'room';
                console.log(this.redirects);
            }
        },
        handleSelect(index) {
            // 根据选中的菜单项更新面包屑路径
            const paths = {
                '1-1': { name: '首页', path: '/option1' },
                '2-1': { name: '用户管理', path: '/option1' },
                '3-1': { name: '导航三/选项1', path: '/option1' },
                '3-2': { name: '导航三/选项2', path: '/option2' },
                '4-1': { name: '房间管理', path: '/option1' }
            };

            this.breadcrumbItems = [
                { name: '首页', path: '/' },
                paths[index]
            ];
        }
    }
});
</script>
<style>
    html, body, #app, .el-container {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .el-header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 5px;
    }
    .breadcrumb-container {
        width: 100%;
    }

    .name-container {
        margin-top: auto;
        font-weight: bold;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        height: 100%;
        width: 200px; /* 固定宽度 */
        transition: width 0.3s;
       /* padding-top: 150px;*/
    }
    .el-aside.collapsed {
        width: 64px; /* 收缩后的宽度 */
    }
    .el-menu {
        border-right: none;
        width: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px; /* 固定宽度 */
        min-height: 400px;
    }
    .el-menu--collapse {
        width: 64px; /* 收缩后的宽度 */
    }
    .el-menu-item, .el-submenu__title {
        height: 56px;
        line-height: 56px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: calc(100% - 60px);
    }
    .logo {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
    }
    .logo img {
        max-height: 130px;
        max-width: 180px;
    }

</style>
</body>

</html>